<template>
  <view class="page_t">
    <pageheader :setting="settingdata"></pageheader>
    <view class="numbers">共关注7人</view>
    <view class="contents">
      <view class="searchContent">
        <u-icon name="search" color="#B1B8C8" size="28" class="search_icon"></u-icon>
        <u-input v-model="searchvalue" placeholder="搜索" type="text" :border="false" placeholderStyle="color:#999999"
          :focus="true" class="search_" :clearable="false" />
      </view>
      <view class="personbox" v-for="(item,index) in list" :key="index">
        <image src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1442342147,4215676959&fm=26&gp=0.jpg"
          mode="aspectFill"></image>
        <view class="person_info">
          <view class="personMain">
            <text class="personName">诗与远方</text>
            <text class="personPhone">180****0000</text>
          </view>
          <view class="personContacts">
            <text class="iconfont icon-dilanxianxingiconyihuifu_huabanfuben" @click="tochat"></text>
            <text class="iconfont icon-dianhua1"></text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  var _this;
  export default {
    data() {
      return {
        settingdata: {
          name: '我的关注',
          bgColor: '#fff',
          titleColor: '#000000',
          showNav: true,
          showTypes: 0,
          position: "memetion"
        },
        list: [0, 0, 0, 0, 0, 0, 0],
        searchvalue: ''
      }
    },
    onLoad(e) {
      _this = this
    },
    onShow() {},
    methods: {
      tochat: function() {
        uni.navigateTo({
          url: "/chat/chatingroom"
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page_t {
    min-height: 100vh;
    background-color: #f2f2f2;
    display: flex;
    flex-direction: column;
    align-items: center;

    .numbers {
      height: 68rpx;
      width: 100%;
      text-align: center;
      line-height: 68rpx;
      color: #B4B3B3;
      font-size: 24rpx;
    }

    .contents {
      padding: 36rpx 32rpx 40rpx 30rpx;
      display: flex;
      flex-direction: column;
      background-color: #fff;

      .searchContent {
        width: 688rpx;
        height: 68rpx;
        border-radius: 34rpx;
        background: #F7F7F7;
        display: flex;
        flex-direction: row;
        align-items: center;

        .search_icon {
          margin-left: 24rpx;
        }

        .search_ {
          color: #333333;
          font-size: 28rpx;
          flex: 1;
          margin: 0 14rpx;
        }
      }

      .personbox {
        display: flex;
        flex-direction: row;
        align-items: center;

        image {
          width: 94rpx;
          height: 94rpx;
          border-radius: 50%;
        }

        .person_info {
          margin-left: 30rpx;
          padding: 37rpx 0;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          border-bottom: 2rpx solid #f2f2f2;
          flex: 1;

          .personMain {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .personName {
              color: #333333;
              font-size: 32rpx;
            }

            .personPhone {
              margin-top: 17rpx;
              color: #B6B6B6;
              font-size: 26rpx;
            }
          }

          .personContacts {
            display: flex;
            flex-direction: row;
            align-items: center;

            text {
              font-size: 40rpx;
              color: #38BE8C;
              margin: 0 21rpx;
            }
          }
        }
      }
    }
  }
</style>
